<template>
	<div class="privacy-policy-container">
		<div class="privacy-policy-content">
			<h1 class="policy-title">南京环动分布式电站智能运维平台服务协议</h1>
			<div class="policy-meta">
				<span class="policy-date">生效日期：2025年06月12日</span>
			</div>

			<div class="policy-section">
				<p class="section-text">欢迎来到南京环动分布式电站智能运维平台网页！</p>
				<p class="section-text">因您是我们南京环动分布式电站智能运维平台的注册用户，我们希望让您了解我们平台的服务协议，该协议将于2025年06月12日生效。</p>
				<p class="section-text">我们致力于保护您的个人数据隐私，作为我们隐私保护实践的一部分，我们特别强调在您使用我们平台的过程中该服务协议始终适用。</p>
			</div>

			<div class="policy-section" id="services">
				<h2 class="section-title">1、我们提供的服务</h2>
				
				<div class="subsection">
					<h3 class="subsection-title">（1）账号注册服务</h3>
					<p class="subsection-text">我们通过邮箱、手机号为您提供注册账号的服务，通过该服务您可以拥有属于自己的账号。</p>
				</div>

				<div class="subsection">
					<h3 class="subsection-title">（2）在线创建光伏电站服务</h3>
					<p class="subsection-text">您可以根据您光伏电站的物理信息创建一个线上的电站，并在电站中添加我们的采集器设备以达到映射您现实电站的目的。</p>
				</div>

				<!-- 其他服务项目按相同结构添加 -->
			</div>

			<div class="policy-section" id="data-policy">
				<h2 class="section-title">2、我们的数据政策</h2>

				<div class="subsection">
					<h3 class="subsection-title">（1）处理</h3>
					<p class="subsection-text">
						为了向您提供上述服务，我们要对您的个人数据进行以下处理，主要包括：收集、记录、组织、建构、存储、修改、检索、咨询、使用、披露、传播或其他的利用，排列、组合、限制、删除或销毁，无论此操作是否采用自动化的手段。
					</p>
				</div>

				<!-- 其他数据政策项目按相同结构添加 -->
			</div>

			<div class="policy-section" id="your-rights">
				<h2 class="section-title">3、您的权利</h2>

				<div class="subsection">
					<h3 class="subsection-title">（1）访问权</h3>
					<p class="subsection-text">
						您有权获悉我们是否正在处理您的个人数据信息，如有，您有权获悉我们持有的您的个人数据信息的情况及对这些数据如何使用和与谁分享信息的情况。您有权对数据监督机构提出申诉。
					</p>
				</div>

				<!-- 其他权利项目按相同结构添加 -->
			</div>

			<div class="policy-section" id="your-commitments">
				<h2 class="section-title">4、您的承诺</h2>
				<div class="policy-highlights">
					<ul class="highlight-list">
						<li class="highlight-item">
							您同意我们为了向您提供服务可以处理您的个人数据。您也拥有随时撤销该同意的权利。但该撤销不影响在撤销前基于您的同意所做的数据处理的法律效力。
						</li>
						<!-- 其他承诺条款按相同结构添加 -->
					</ul>
				</div>
			</div>

			<div class="policy-section" id="force-majeure">
				<h2 class="section-title">5、不可抗力</h2>
				<p class="section-text">
					除非有关服务的条款和条件另有规定，否则我们在任何情况下都不应对直接或间接的自然行为、力量或超出我们合理控制原因所致的内容或服务的任何延误、失败或中断负责。
				</p>
			</div>

			<div class="policy-section" id="governance">
				<h2 class="section-title">6、管辖法律和争端解决</h2>
				<p class="section-text">本协议应受中国法律管辖，而不考虑其法律冲突条款。本协议中的双方将争议提交西安的法院进行管辖。</p>
			</div>

			<div class="policy-section" id="complaints">
				<h2 class="section-title">7、投诉建议</h2>
				<p class="section-text">
					如果您就我们对您的数据处理有任何投诉意见，请与我们的数据保护员联系:
					<a href="william693@163.com" class="contact-link">william693@163.com</a>，我们将尽力解决您的要求。
				</p>
				<p class="section-text">我们的电话是：<strong>025-85320058</strong>。</p>
			</div>

			<div class="policy-section" id="modifications">
				<h2 class="section-title">8、修改通知</h2>
				<p class="section-text">我们保留随时修改本协议条款的权利。修改后的协议将在发布后立即生效。您继续使用我们的服务即表示您接受修改后的协议。</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'termService',
};
</script>

<style lang="scss" scoped>
.privacy-policy-container {
	font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	line-height: 1.6;
	color: #333;
	background-color: #f9f9f9;
	padding: 20px 0;
	height: 100vh;
	overflow-y: auto;
}

.privacy-policy-content {
	max-width: 80%;
	margin: 0 auto;
	padding: 30px;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	min-height: fit-content;
}

.policy-title {
	font-size: 28px;
	font-weight: 600;
	color: #222;
	margin-bottom: 15px;
	text-align: center;
}

.policy-meta {
	text-align: center;
	margin-bottom: 30px;
	color: #666;
}

.policy-date {
	margin: 0 15px;
}

.policy-section {
	margin-bottom: 40px;
}

.section-title {
	font-size: 22px;
	font-weight: 600;
	color: #333;
	margin: 30px 0 20px;
	padding-bottom: 8px;
	border-bottom: 1px solid #eee;
}

.section-text {
	margin-bottom: 20px;
	color: #444;
}

.policy-highlights {
	background-color: #f5f9ff;
	border-left: 4px solid #1890ff;
	padding: 15px 20px;
	margin: 25px 0;
	border-radius: 0 4px 4px 0;
}

.highlight-list {
	padding-left: 20px;
	margin: 0;
}

.highlight-item {
	margin-bottom: 10px;
	color: #444;
}

.policy-toc {
	background-color: #f8f8f8;
	padding: 15px 25px;
	border-radius: 6px;
	margin: 30px 0;
}

.toc-title {
	font-size: 18px;
	margin: 0 0 15px 0;
	color: #333;
}

.toc-list {
	padding-left: 20px;
	margin: 0;
}

.toc-item {
	margin-bottom: 8px;
}

.subsection {
	margin-bottom: 25px;
}

.subsection-title {
	font-size: 18px;
	font-weight: 500;
	color: #444;
	margin: 25px 0 10px;
}

.subsection-text {
	margin-bottom: 15px;
	color: #555;
}

.contact-list {
	padding-left: 20px;
	margin: 15px 0;
}

.contact-item {
	margin-bottom: 8px;
}

.contact-link {
	color: #1890ff;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}
</style>